<template>
 <div>
  <baidu-map @ready="loadedMap"  style="height: 800px;width: 100%"
             :zoom="zoom"   :center="mapCenter" :scroll-wheel-zoom="true">
    <!--拖拽标注点  @dragend="dragPointMarker" -->
    <div v-for="item in traiMaplList">
      <bm-marker :position="{lng: item.longitude, lat: item.latitude}"  @click="open(item.id)" :icon="icon">
      </bm-marker>
    </div>

  </baidu-map>

   <el-dialog :visible.sync="dialogFormVisible" @close="close">
     <template>
       <div style="font-size: 22px;font-weight:bold;margin-top: -30px">运动员信息</div>
     </template>
     <div>
       <div class="top">
         <div class="size">姓名：{{traiInfo.certName}}</div> <div class="size">性别：<span v-if="traiInfo.sex==1">男</span><span v-if="traiInfo.sex==2">女</span></div>
       </div>

       <div class="top">
         <div class="size">身份证号：{{traiInfo.certNo}}</div> <div class="size">联系电话：{{traiInfo.phone}}</div>
       </div>

       <div class="top">
         <div class="size">紧急联系人：{{traiInfo.emergencyContact}}</div> <div class="size">车队/俱乐部：{{traiInfo.club}}</div>
       </div>

       <div class="top">
         <div class="size">紧急联系人电话：{{traiInfo.emergencyPhone}}</div>
       </div>

       <div class="top">
         <div class="size">备注信息：{{traiInfo.remark}}</div>
       </div>

       <div class="top">
         <div class="size">附件信息：<el-image v-for="url in urls" :key="url" :src="url" style="width: 100px; height: 100px;margin-left: 20px"
                                          :preview-src-list="urls" z-index="20000"></el-image></div>
       </div>
     </div>
     <div class="size" style="margin-top: 30px">骑行轨迹：</div>
     <TrailMapInfo v-if="dialogFormVisible" :lat="traiForm.lat" :lng="traiForm.lng" :value="traiForm.traiId"/>
   </el-dialog>

 </div>


</template>

<script>
  import { listEnroll,getEnroll} from "@/api/hps/enroll";
  import {BmlLushu} from 'vue-baidu-map';
  import TrailMapInfo from './trailMapInfo';
  export default {
    name: "trailMap",
    components: {
      BmlLushu,TrailMapInfo
    },
    data () {
      return {
        play: true,
        path: {},
        //报名最新轨迹列表
        traiMaplList:[],
        //报名详细信息
        traiInfo:[],
        //运动员详情附件
        urls:[],
        baseUrl: process.env.VUE_APP_BASE_API,
        traiForm:{
          traiId:undefined,
          lng:undefined,
          lat:undefined
        },
        dialogFormVisible: false,
        icon: {
          url: require('@/assets/trail/point.png'),
          size: {width: 52, height: 52},
          opts: {anchor: {width: 13, height:13}}
        },
        // 地图坐标解析器
        gc: '',
        // 地图
        map: '',
        // 地图中心点
        mapCenter: {},
        // 地图缩放
        zoom: 15,
        // 标注点的坐标信息
        pointMarker: {},
        // 点信息
        pointInfo: {},
        queryParams: {
          siteId: undefined
        },
        //定时任务
        intervalId:null
      }
    },

    created() {
      this.queryParams.siteId = this.$route.query.siteId;
      this.path.lat=this.$route.query.lat;
      this.path.lng=this.$route.query.lng;
      console.log(this.queryParams.siteId)
      //只执行一次获取数据
      this.getList2();
      //每5秒执行获取数据
      this.getList();

    },

    methods: {
      getList() {
        this.loading = true;
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        this.intervalId = setInterval(() => {
          console.log("每5秒获取一次最新运动员位置")
          listEnroll(this.queryParams).then(response => {
            this.traiMaplList=response.rows;

            //获取第一条数据的经纬度，设置成地图初始显示位置
            var check=0;
            var path={
              lng:'',
              lat:''
            }
            response.rows.forEach(item => {
              if(item.longitude!=undefined && item.longitude!='' && check==0){
                path.lat=item.latitude;
                path.lng=item.longitude;
                check=1;
              }
            })
            this.path=path;
            this.loading =false;
          });
        },5000);

      },

      getList2() {
        this.loading = true;
          listEnroll(this.queryParams).then(response => {
            this.traiMaplList=response.rows;
            this.loading =false;
          });
      },

      open(id){
        getEnroll(id).then(response => {
          this.traiInfo=response.data;
          this.traiForm.lat=response.data.latitude;
          this.traiForm.lng=response.data.longitude;
          this.traiForm.traiId=response.data.id;
          //把附件地址转成数组
          var arry=[];
          if(response.data.pics==null){
            arry=[''];
          }else{
            arry =response.data.pics.split(',');
          }
          //清理数组最后一个空格
          var newArry=[];
          var baseUrl=this.baseUrl;
          arry.map(function(item){
            if(item!='' && item!=undefined)
            {
              newArry.push(baseUrl + item)
            }
          })
          this.urls=newArry;
          this.dialogFormVisible=true;
        });

      },

      close(){
        this.traiForm.lat=undefined;
        this.traiForm.lng=undefined;
        this.traiForm.traiId=undefined;
        this.urls=[];
        this.dialogFormVisible=false;
      },

      loadedMap({BMap, map}) {

        //创建地址解析器实例
        this.gc = new BMap.Geocoder();
        this.map = map;

        if (this.path.lat && this.path.lng) {
          this.mapCenter = this.path
          this.addMarker(this.path)
          this.pointInfo.location = this.path
        } else {
          this.mapCenter = "江西"
        }

      },
      reset () {
        this.play = false
      },
      // 添加标注——跳动的点
      addMarker(point) {
        this.pointMarker = point
      },
      // 设置地图缩放级别
      setZoom(zoom) {
        this.zoom = zoom
      },


    }

  }
</script>
<style>
  .size{
    font-size: 18px;
    width: 50%;
  }
  .top{
    display: flex;
    margin-top: 30px;
  }
</style>
